<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1" import="com.controller.Controller"
	import="com.bean.WorkerBean"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Inventory List</title>
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/CSS/base/jquery.ui.all.css">
<script src="<%=request.getContextPath()%>/JS/jquery-1.8.2.js"></script>
<script src="<%=request.getContextPath()%>/JS/jquery.bgiframe-2.1.2.js"></script>
<script src="<%=request.getContextPath()%>/JS/jquery.ui.core.js"></script>
<script src="<%=request.getContextPath()%>/JS/jquery.ui.widget.js"></script>
<script src="<%=request.getContextPath()%>/JS/jquery.ui.mouse.js"></script>
<script src="<%=request.getContextPath()%>/JS/jquery.ui.button.js"></script>
<script src="<%=request.getContextPath()%>/JS/jquery.ui.draggable.js"></script>
<script src="<%=request.getContextPath()%>/JS/jquery.ui.position.js"></script>
<script src="<%=request.getContextPath()%>/JS/jquery.ui.resizable.js"></script>
<script src="<%=request.getContextPath()%>/JS/jquery.ui.dialog.js"></script>
<script src="<%=request.getContextPath()%>/JS/jquery.ui.effect.js"></script>
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/CSS/demos.css">
<style>
body {
	font-size: 62.5%;
}

label,input {
	display: block;
}

input.text {
	margin-bottom: 12px;
	width: 95%;
	padding: .4em;
}

fieldset {
	padding: 0;
	border: 0;
	margin-top: 25px;
}

h1 {
	font-size: 1.2em;
	margin: .6em 0;
}

div#users-contain {
	width: 700px;
	margin: 20px 0;
	align: center;
}

div#users-contain table {
	margin: 1em 0;
	border-collapse: collapse;
	width: 100%;
}

div#users-contain table td,div#users-contain table th {
	border: 1px solid #eee;
	padding: .6em 10px;
	text-align: center;
}

.ui-dialog .ui-state-error {
	padding: .3em;
}

.validateTips {
	border: 1px solid transparent;
	padding: 0.3em;
}
</style>
<script>
	$(document).ready(function() {
		$("#loader").click(function() {
			// Load the page into the div
			$("#resultreturn").load("<%=request.getContextPath()%>/JSP/addWorker.jsp");
											// Show the modal dialog
											$("#resultreturn").dialog({
												modal : true
											});
										});
					});

	$(function() {
		var name = $("#name"), jobTitle = $("#jobTitle"), address = $("#address"), phone = $("#phone"), hireDate = $("#hireDate"), allFields = $(
				[]).add(name).add(jobTitle).add(address).add(phone).add(
				hireDate), tips = $(".validateTips");

		function updateTips(t) {
			tips.text(t).addClass("ui-state-highlight");
			setTimeout(function() {
				tips.removeClass("ui-state-highlight", 1500);
			}, 500);
		}

		function checkLength(o, n, min, max) {
			if (o.val().length > max || o.val().length < min) {
				o.addClass("ui-state-error");
				updateTips("Length of " + n + " must be between " + min
						+ " and " + max + ".");
				return false;
			} else {
				return true;
			}
		}
		function checkRegexp(o, regexp, n) {
			if (!(regexp.test(o.val()))) {
				o.addClass("ui-state-error");
				updateTips(n);
				return false;
			} else {
				return true;
			}
		}

		$("#dialog-form").dialog({
			autoOpen : false,
			height : 450,
			width : 350,
			modal : true,
			buttons : {
				"Cancel" : function() {
					$(this).dialog("close");
				}
			},
			close : function() {
				allFields.val("").removeClass("ui-state-error");
			}
		});

		$("#dialog-form-add-client").dialog({
			autoOpen : false,
			height : 450,
			width : 350,
			modal : true,
			buttons : {
				"Cancel" : function() {
					$(this).dialog("close");
				}
			},
			close : function() {
				allFields.val("").removeClass("ui-state-error");
			}
		});

		$("#create-user").button().click(function() {
			$("#dialog-form").dialog("open");
		});

		$("#create-client").button().click(function() {
			$("#dialog-form-add-client").dialog("open");
		});

		$("#add-worker").button().click(function() {

			confirm("Send for Validation ?");
			var bValid = true;
			allFields.removeClass("ui-state-error");

			bValid = bValid && checkLength(name, "name", 3, 16);
			bValid = bValid && checkLength(jobTitle, "jobTitle", 3, 16);
			bValid = bValid && checkLength(address, "address", 20, 200);
			bValid = bValid && checkLength(phone, "phone", 10, 10);

			if (bValid) {
				$(this).dialog("close");
				return true;
			} else
				return false;

		});

		$("#add-client").button().click(function() {

			confirm("Send for Validation ?");
			var bValid = true;
			allFields.removeClass("ui-state-error");

			bValid = bValid && checkLength(name, "name", 3, 16);
			bValid = bValid && checkLength(jobTitle, "jobTitle", 3, 16);
			bValid = bValid && checkLength(address, "address", 20, 200);
			bValid = bValid && checkLength(phone, "phone", 10, 10);

			if (bValid) {
				$(this).dialog("close");
				return true;
			} else
				return false;

		});

	});
</script>



</head>
<body>
	<%
		ArrayList<WorkerBean> WorkerList = null;
		WorkerList = (ArrayList<WorkerBean>) request
				.getAttribute("WorkerList");
	%>


	<div id="users-contain" class="ui-widget">
		<h1>Employees' List</h1>
		<table id="users" class="ui-widget ui-widget-content">
			<thead>
				<tr class="ui-widget-header ">
					<th>EmpID</th>
					<th>Name</th>
					<th>Job Title</th>
					<th>Address</th>
					<th>Phone</th>
					<th>Hire Date</th>
				</tr>
			</thead>
			<tbody>
				<%
					if (WorkerList != null) {
						WorkerBean holderBean = null;
						for (int i = 0; i < WorkerList.size(); i++) {
							holderBean = null;
							holderBean = WorkerList.get(i);
				%>
				<tr>
					<td><%=holderBean.getId()%></td>
					<td><%=holderBean.getName()%></td>
					<td><%=holderBean.getJobTitle()%></td>
					<td><%=holderBean.getAddress()%></td>
					<td><%=holderBean.getPhone()%></td>
					<td><%=holderBean.getHireDate()%></td>
				</tr>

				<%
					}
					} else {
				%>
				<tr>
					<td>Chitra Passoupathi</td>
					<td>Proprietrice</td>
					<td>2, 2nd Cross, 1st Main road</td>
					<td>9791792943</td>
					<td>15-Nov-1996</td>
				</tr>
			</tbody>

			<%
				}
			%>

			</tbody>
		</table>
	</div>

	<div id="resultreturn" style="display: none"></div>
	<form>
		<input type="button" value="New Employee" id="loader" />
	</form>



</body>
</html>